<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const arr = ["2023-12-21", "2024-1-5", "2024-1-10", "2024-5-6"];

      const newArr = arr.map((el) => {
        const ymd = el.split("-");
        return {
          year: +ymd[0],
          month: +ymd[1],
          day: +ymd[2],
        };
      });

      newArr.sort((a, b) => {
        if (a.year === b.year) {
          if (a.month === b.month) {
            return a.day > b.day ? 1 : -1;
          } else {
            return a.month > b.month ? 1 : -1;
          }
        } else {
          return a.year > b.year ? 1 : -1;
        }
      });

      console.log(newArr);

      // const arrObj = [
      //   { year: 2023, month: 12, day: 21 },
      //   { year: 2024, month: 11, day: 30 },
      //   { year: 2024, month: 5, day: 6 },
      // ];

      // const arrObjSort = [
      //   { year: 2023, month: 12, day: 21 },
      //   { year: 2024, month: 5, day: 6 },
      //   { year: 2024, month: 11, day: 30 },
      // ];
    </script>
  </body>
</html>
